<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="always">
        <!-- 顶部 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="15">
            <el-form :inline="true" :model="tag" size="small">
              <el-form-item label="标签名称">
                <el-input v-model="tag.tagName"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="tag.state" placeholder="请选择">
                  <el-option value="1" label="启用"></el-option>
                  <el-option value="0" label="禁用"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="handleClear">清除</el-button>
                <el-button size="small" type="primary" @click="getTagsList"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              @click="handleAdd"
              >新增标签</el-button
            >
          </el-col>
        </el-row>
        <!-- 消息提示 -->
        <el-alert
          show-icon
          :closable="false"
          :title="'数据一共'+total+'条'"
          style="margin-bottom: 15px;"
          type="info"
          >
        </el-alert>
        <!-- 表格 -->
        <el-table :data="tagList" :header-cell-style="{
            'background-color': '#fafafa',
            'border-bottom': '2px #e8e8e8 solid'
        }">
          <el-table-column type="index" label="序号" width="80px"></el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
          ></el-table-column>
          <el-table-column prop="tagName" label="标签名称"></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{row}">
              {{ row.addDate | formatDate("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{row}">
              {{ row.state === 0 ? "已禁用" : "已启用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button type="text" @click="handleStart(row)">{{
                row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="handleEdit(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="handleDel(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="tags_pagination">
          <el-pagination
            v-if="showPagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="tag.page"
            :page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :page-size="tag.pagesize"
            layout=" prev, pager, next, sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 新增/编辑 -->
        <el-dialog
          :title="tagTitle"
          :visible="showTagsAdd"
          @close="handleClose"
          width="28%"
        >
          <el-form
            label-width="80px"
            :model="subObj"
            :rules="rules"
            ref="addForm"
          >
            <el-form-item label="所属学科" prop="subjectID">
              <el-select
                v-model="subObj.subjectID"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  :label="item.subjectName"
                  :value="item.id"
                  v-for="item in subList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="tagName">
              <el-input
                v-model="subObj.tagName"
                placeholder="请输入目录名称"
              ></el-input>
            </el-form-item>
          </el-form>
          <template #footer class="template_footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
          </template>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, changeState, add, remove, update } from '@/api/hmmm/tags.js'
import { list as subjectsList } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      tag: {
        tagName: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      total: 0,
      tagList: [],
      showTagsAdd: false,
      subList: [],
      subObj: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [
          {
            required: true,
            message: '请选择所属学科',
            trigger: ['blur', 'change']
          }
        ],
        tagName: [
          {
            required: true,
            message: '请输入标签名称',
            trigger: ['blur', 'change']
          }
        ]
      },
      showPagination: true
    }
  },
  created () {
    this.getTagsList()
  },
  watch: {
    total () {
      if (this.total === this.tagList.length) {
        this.showPagination = false
      } else {
        this.showPagination = true
      }
    }
  },
  computed: {
    tagTitle () {
      return this.subObj.id ? '修改标签' : '新增标签'
    }
  },
  methods: {
    // 1. 获取列表
    async getTagsList () {
      const res = await list(this.tag)
      this.tagList = res.data.items
      this.total = res.data.counts
    },
    // 2. 当前页发送改变
    handleCurrentChange (val) {
      this.tag.page = val
      this.getTagsList()
    },
    // 3. 每页条数发送改变
    handleSizeChange (val) {
      this.tag.pagesize = val
      this.tag.page = 1
      this.getTagsList()
    },
    // 4. 禁用启用按钮
    async handleStart (data) {
      data.state = data.state === 1 ? 0 : 1
      await changeState(data)
      this.getTagsList()
    },
    // 5. 清除
    handleClear () {
      this.tag.tagName = null
      this.tag.state = null
      this.tag.page = 1
      this.getTagsList()
    },
    // 6. 关闭弹框
    handleClose () {
      this.showTagsAdd = false
      this.$refs.addForm.resetFields()
      this.subObj = {
        subjectID: '',
        tagName: ''
      }
    },
    // 7. 获取学科列表
    async handleAdd () {
      this.showTagsAdd = true
      const res = await subjectsList({
        page: 1,
        pagesize: 9999
      })
      this.subList = res.data.items
    },
    // 8. 提交修改/添加标签
    handleSubmit () {
      this.$refs.addForm.validate(async flag => {
        if (!flag) return ''
        if (this.subObj.id) {
          await update(this.subObj)
          this.$message.success('修改标签成功')
        } else {
          await add(this.subObj)
          this.$message.success('新增标签成功')
        }
        this.getTagsList()
        this.handleClose()
      })
    },
    // 9. 删除
    handleDel (data) {
      this.$confirm('此操作将删除该标签,是否继续', '温馨提示', {
        type: 'warning'
      }).then(async () => {
        if (this.tagList.length === 1 && this.tag.page > 1) {
          this.tag.page--
        }
        await remove(data)
        this.$message.success('删除标签成功')
        this.getTagsList()
      })
    },
    // 10. 修改
    async handleEdit (row) {
      const res = await subjectsList({
        page: 1,
        pagesize: 9999
      })
      this.subList = res.data.items
      this.subObj = row
      this.showTagsAdd = true
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard-container{
  .app-container{
    margin: 10px 0;
    padding: 0 10px;
  }
  ::v-deep .el-pagination__jump {
    margin-left: 0;
  }
}
.tags_pagination {
  float: right;
  margin: 15px 0;
}
::v-deep .el-dialog__footer {
  margin-left: 230px;
}

::v-deep .el-form-item__label {
  width: 80px;
}
</style>
